<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<%@	taglib prefix="c"			uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt"		uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@	taglib prefix="fn"		uri="http://java.sun.com/jsp/jstl/functions"%>
<title>중고마트</title>
</head>
<body>
<section id="register" data-role="page">
    <header data-role="header" data-position="fixed">
		<a href="index.do" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
		<h1 style="text-overflow:clip;margin-left:10%;margin-right:10%">중고 상품 등록</h1>
		<a id="logout" data-role="button" href="logout.do" class="ui-btn-right" data-ajax="false">로그아웃</a>
	</header>
    <form id="registerForm" name="registerForm" data-ajax="false" method="post" action="register.do" enctype="multipart/form-data">
    <div data-role="content">
    	<select name="category" id="category">
    		<option value="none">선택안함</option>
	        <option value="gloves">중고 야구 글러브</option>
	        <option value="instrument">중고 악기</option>
	        <option value="book">중고 책</option>
    	</select>
    	<p id="categoryCaution" class="caution"></p>
     	<input type="file" data-clear-btn="true" name="image" id="image" placeholder="상품 이미지">
     	<p id="imageCaution" class="caution"></p>
     	<input type="text" data-clear-btn="true" name="innerTitle" id="innerTitle" value="" placeholder="상품 이름">
     	<p id="innerTitleCaution" class="caution"></p>
     	<input type="text" data-clear-btn="true" name="price" id="price" value="" placeholder="희망 가격">
     	<p id="priceCaution" class="caution"></p>
     	<textarea cols="40" rows="8" name="innerDescription" id="innerDescription" placeholder="상품 설명"></textarea>
     	<p id="innerDescriptionCaution" class="caution"></p>
     	<p id="message">${message}</p>
     	<input type="hidden" name="title" id="title">
     	<input type="hidden" name="description" id="description">
    </div>
    <div data-role="content">
        <input type="submit" formnovalidate id="submit" value="등록"  data-inline="false" data-icon="check" />
    </div>
	</form>
	
    <footer data-role="footer" data-position="fixed">
    	<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a id="products" href="products.do" data-icon="grid" rel="external">전체 상품</a></li>
				<li><a id="myProducts" href="myProducts.do" data-icon="bars" rel="external">내 상품</a></li>
				<li><a id="myFavorites" href="myFavorites.do" data-icon="star" rel="external">내 관심상품</a></li>
			</ul>
		</div><!-- /navbar -->
    </footer>
</section>
</body>
<style type="text/css">
.caution {
    color: red;
}
</style>
<script>
$(document).bind('pageinit', function() {
	invisibleCaution();
	
	var sectionId = $('section').attr('id');
	
	if ( sectionId == "favorite" ) {
		$('#myFavorites').addClass("ui-btn-active");
	} else if ( sectionId == "products" ) {
		$('#products').addClass("ui-btn-active");
	} else {
		$('#myProducts').addClass("ui-btn-active");
	}
	
	$('#registerForm').submit(function() {
		visibleMessage(false);
		if ( !validateForm() ) {
			return false;
		}
		
		return true;
	});
});

function invisibleCaution() {
	$('.caution').hide();
}

function visibleCategoryCaution(visible) {
	if ( !visible ) {
		$('#categoryCaution').hide();
	} else {
		$('#categoryCaution').show();
	}
}

function visibleImageCaution(visible) {
	if ( !visible ) {
		$('#imageCaution').hide();
	} else {
		$('#imageCaution').show();
	}
}

function visibleInnerTitleCaution(visible) {
	if ( !visible ) {
		$('#innerTitleCaution').hide();
	} else {
		$('#innerTitleCaution').show();
	}
}

function visiblePriceCaution(visible) {
	if ( !visible ) {
		$('#priceCaution').hide();
	} else {
		$('#priceCaution').show();
	}
}

function visibleInnerDescriptionCaution(visible) {
	if ( !visible ) {
		$('#innerDescriptionCaution').hide();
	} else {
		$('#innerDescriptionCaution').show();
	}
}

function visibleMessage(visible) {
	if ( !visible ) {
		$('#message').hide();
	} else {
		$('#message').show();
	}
}

function validatePrice(price) { 
	var intRegex = /^\d+$/;
	return intRegex.test(price);
}

function validateForm() {
	var validation = true;
	invisibleCaution();

	if ( $('#category').val() == "none" ) {
		$('#categoryCaution').text("*카테고리를 선택해 주세요.");
		visibleCategoryCaution(true);
		validation = false;
	}
	if ( $.trim($('#image').val()) == "" ) {
		$('#imageCaution').text("*이미지를 등록해 주세요.");
		visibleImageCaution(true);
		validation = false;
	}
	if ( $.trim($('#innerTitle').val()) == "" ) {
		$('#innerTitleCaution').text("*상품 이름을 등록해 주세요.");
		visibleInnerTitleCaution(true);
		validation = false;
	}
	if ( !validatePrice($('#price').val()) ) {
		$('#priceCaution').text("*가격을 숫자 형식으로 입력해 주세요.");
		visiblePriceCaution(true);
		validation = false;
	}
	if ( $.trim($('#innerDescription').val()) == "" ) {
		$('#innerDescriptionCaution').text("*상품 설명을 등록해 주세요.");
		visibleInnerDescriptionCaution(true);
		validation = false;
	}
	
	if ( validation ) {
		//multipart로 전송하는 경우 한글에 대한 encoding을 해야한다.
		var title = encodeURIComponent($.trim($('#innerTitle').val()));
		$('#title').val(title);
		
		var description = encodeURIComponent($.trim($('#innerDescription').val()));
		$('#description').val(description);
	}
	return validation;
}

</script>
</html>